<template>
<div>
  <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName">
    <el-table-column
        prop="date"
        label="日期"
        width="180">
      <template scope="scope">
        {{new Date(scope.row.date).toLocaleString()}}
      </template>
    </el-table-column>
    <el-table-column
        prop="message"
        label="内容"
        width="600">
    </el-table-column>
    <el-table-column
        prop="type"
        label="类型">
    </el-table-column>
    <el-table-column
        prop="label"
        label="级别">
    </el-table-column>
    <el-table-column
        prop="data"
        label="操作">
      <template slot-scope="scope">
        <el-button @click="open=true,select=scope.row.data" size="mini">查看详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog
      title="报错详情"
      :visible.sync="open"
      top="2vh"
      width="70%"
      :key="new Date().getTime()"
      >
    <pre v-highlight-a>
      <code class="java">
        {{
          this.select
        }}
      </code>
    </pre>
    <span slot="footer" class="dialog-footer">
    <el-button type="danger" @click="open = false">关闭</el-button>
  </span>
  </el-dialog>
</div>
</template>

<script>
import {LogApi} from "@/core/request/api/LogApi";

export default {
  name: "logPage",
  data(){
    return{
      tableData:null,
      select:null,
      open:false
    }
  },
  mounted() {
    this.axios.get(LogApi.info)
        .then(res=>{
            if(!res.data.code){
                this.tableData=res.data.data
                this.$message.success(res.data.message)
            }
        })
        .catch(()=>{
           this.$message.error("消息队列堆积，请清理后再试...")
        })
  }
}
</script>

<style scoped>

</style>